<template>
  <Page class="demo-ui demo-page">
    <div class="btn-wrap">
      <button class="btn" @click="confirm('transition')">
        测试transition动画
      </button>
      <button class="btn" @click="confirm">
        confirm框
      </button>
      <button class="btn" @click="confirm('btn')">
        定制按钮的confirm框
      </button>
      <div class="fgx"></div>

      <button class="btn" @click="loading">
        loading
      </button>
      <button class="btn" @click="loading('colorful')">
        变色loading
      </button>
      <div class="fgx"></div>

      <button class="btn" @click="tips('success')">
        成功提示
      </button>
      <button class="btn" @click="tips('error')">
        错误提示
      </button>
      <button class="btn" @click="tips('warn')">
        警告提示
      </button>
      <button class="btn" @click="tips('long')">
        长提示
      </button>
      <div class="fgx"></div>

      <button class="btn" @click="showSlideToCloseModal = true">
        可下滑关闭的模态层
      </button>
      <div class="fgx"></div>
    </div>

    <Modal
      class="slide-to-close-modal"
      :show="showSlideToCloseModal"
      @close="showSlideToCloseModal = false"
      slideToClose
      backgroundColor="white"
    >
      <p>我可以下滑关闭哦~</p>
    </Modal>
    <div v-if="showTip" class="topToBottom03-enter-active">
      我出来啊!
    </div>
    <div>
      测试vue自定义指令的使用（只能输入大小写和数字）
      <input type="text" v-filterLetterNumber v-model="inputSd">
      <div class="fgx"></div>
    </div>
    <p>水纹效果</p>
    <div class="container">
      <div class="wave"></div>
      <div class="wave-mask"></div>
    </div>

    <p class="theme">主题按钮</p>
    <button v-waves class="submit-btn theme-btn" @click="handlerSubmit">
      {{ '立即投保' }}
    </button>
    <NumberSlider v-model="number" :max="90" :min="1" :showType="showType" :displayValue="false" :color="color"/>
    <div>您的满意度：{{ agreeLevel }}</div>
  </Page>
</template>

<script>
import NumberSlider from "@/components/common/ui/NumberSlider";
import Modal from "@/components/common/ui/Modal";

export default {
  name: "demoUi",
  components: {
    Modal,
    NumberSlider
  },
  data() {
    return {
      number: 10,
      showTip: false,
      showSlideToCloseModal: false,
      inputSd:'',
      showType:'digital'
    };
  },
  computed:{
    //满意度动态显示
    agreeLevel(){
      let getDigital = this.number;
      let agreeValue = '';
      if(getDigital > 0 && getDigital <= 30){
        agreeValue = '不满意';
      }else if(getDigital > 30 && getDigital <= 60){
        agreeValue = '一般';
      }else{
        agreeValue = '满意';
      }
      return agreeValue;
    },
    //动态展示滑动条的颜色
    color(){
      let myColor = ''
      if(this.showType === 'digital'){
          if(this.number > 0 && this.number <= 30){
            myColor = '#EEEE00';
          }else if(this.number > 30 && this.number <= 60){
            myColor = '#FF00FF';
          }else{
            myColor = '#FF3030';
          }
        }
        return myColor
    }
  },
  beforeRouteLeave(to, from, next) {
    // 如果modal层为打开状态，先关闭modal
    if (this.showSlideToCloseModal) {
      this.showSlideToCloseModal = false;
      next(false);
      return;
    }
    // 放行
    next();
  },
  methods: {
    // confirm
    confirm(type) {
      if (type === "btn") {
        utils.ui.confirm({
          msg: "你好啊",
          btnList: [
            {
              msg: "不好",
              cb: () => {
                utils.ui.tips("那就好起来");
              }
            },
            {
              msg: "好",
              cb: () => {
                utils.ui.tips("继续保持");
              }
            }
          ]
        });
      } else if(type === 'transition'){
        this.showTip = true;
      }else {
        utils.ui.confirm("你好啊");
      }
    },
    // loading
    loading(type) {
      if (type === "colorful") {
        utils.ui.openLoading({
          openColor: "#ffcc00"
        });
        setTimeout(() => {
          utils.ui.openLoading({
            openColor: "red"
          });
        }, 2000);
        setTimeout(() => {
          utils.ui.closeLoading({
            closeColor: "green"
          });
        }, 4000);
      } else {
        utils.ui.openLoading();
        setTimeout(() => {
          utils.ui.closeLoading();
        }, 2000);
      }
    },

    // tips
    tips(type) {
      if (type === "long") {
        const msg =
          "icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。";
        utils.ui.tips(msg);
      } else {
        const msg = `我是一段${type}类型的提示`;
        utils.ui.tips({
          msg: msg,
          type: type,
          icon: true
        });
      }
    },
    handlerSubmit(){
      // utils.ui.confirm('提交失败！')
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
@import "@/assets/css/global/transition.scss";
input{
  border: black solid 1px;
}
.fgx {
  margin: 10px auto;
  width: 90vw;
  border-top: 1px solid $color-theme;
}
.slide-to-close-modal {
  p {
    font-size: 15px;
    color: #4b4b4b;
    letter-spacing: 2px;
  }
}
.topToBottom03-enter-active{
  display: fixed;
  top: 0;
  width: 200px;
  height: 200px;
  background: burlywood;
}
.theme{
  margin-top:160px ;
}
        .container {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid #e787e7;
            background: #ffffff;
            position: absolute;
            top: 63%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 5px;
            overflow: hidden;
        }
        .wave {
            position: relative;
            width: 100px;
            height: 100px;
            background-image: linear-gradient(-180deg, #3b7bdb 13%, #4d6fdf 91%);
            border-radius: 50%;
        }
        .wave-mask {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left: 50%;
            border-radius: 40%;
            background-color: rgba(212, 24, 24, 0.9);
            transform: translate(-50%, -70%) rotate(0);
            animation: toRotate 10s linear -5s infinite;
            z-index: 20;

            background-color: rgba(255, 255, 255, 0.9);
        }
        @keyframes toRotate {
            50% {
                transform: translate(-50%, -70%) rotate(180deg);
            }
            100% {
                transform: translate(-50%, -70%) rotate(360deg);
            }
        }

</style>
